<!DOCTYPE html>
<html>
  <head>
    <title>Popcorn Youtube Player Example</title>
      <script src="popcorn.ie8.js"></script>
      <script src="../popcorn.js"></script>
      <script src="../wrappers/common/popcorn._MediaElementProto.js"></script>
      <script src="../wrappers/jwplayer/popcorn.HTMLJWPlayerVideoElement.js"></script>
      <script src="../plugins/footnote/popcorn.footnote.js"></script>
      <script src="../plugins/flickr/popcorn.flickr.js"></script>
      <script src="../plugins/webpage/popcorn.webpage.js"></script>
      <script src="../plugins/googlefeed/popcorn.googlefeed.js"></script>
      <script src="../plugins/subtitle/popcorn.subtitle.js"></script>
      <script>
        var addEventListenerHelper = function( element, event, callBack ) {

          if ( element.addEventListener ) {

            element.addEventListener( event, callBack, false );
          } else if ( element.attachEvent ) {

            event = ( event === "DOMContentLoaded" ) ? "onreadystatechange" : "on" + event;
            element.attachEvent( event, callBack );
          }
        };

        // Helper function to get elements
        function element( id ) {

          return document.getElementById( id );
        }

        var done = false;

        addEventListenerHelper( document, "DOMContentLoaded", function( e ) {

          if ( done ) {

            return;
          }

          done = true;

          var paused = true,
              media = new Popcorn.HTMLJWPlayerVideoElement( "#video" ),
              popcorn;

          media.src = "http://media.w3.org/2010/05/sintel/trailer.mp4?controls=1";
          popcorn = Popcorn( media );

          popcorn = popcorn
            .footnote({
              start: 5, // seconds
              end: 40, // seconds
              text: "The video is 'RiP: A Remix Manifesto', by Brett Gaylor",
              target: "footnotediv"
            })
            .flickr({
              start: 20, // seconds
              end: 40, // seconds
              tags: "georgia",
              numberofimages: "8",
              target: "flickrdiv"
            })
            .subtitle({
              start: 5, // seconds
              end: 15, // seconds
              text: "This is overlaid on top of the video. You can hightlight it!",
              display: "inline",
              language: "en"
            })
            .webpage({
              id: "webpages-a",
              start: 0, // seconds
              end: 15, // seconds
              src: "http://webmademovies.org/",
              target: "webpagediv"
            })
            /*.googlefeed({
                start: 0, // seconds
                end: 15, // seconds
                target: "feeddiv",
                url: "http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml",
                title: "Planet Feed",
                orientation: "Vertical"
            })*/
          .listen( "durationchange", function() {
            element( "player-duration" ).innerHTML = popcorn.duration();
          })
          .listen( "volumechange", function() {
            element( "player_vol" ).innerHTML = popcorn.volume();
          })
          .listen( "timeupdate", function() {
            element( "player-time" ).innerHTML = popcorn.currentTime();
          })
          // Update button labels
          .listen( "play" , function() {
            paused = false;
            element( "btn-play-pause" ).innerHTML = "Pause";
          })
          .listen( "pause", function() {
            paused = true;
            element( "btn-play-pause" ).innerHTML = "Play";
          });

          element( "player-status" ).innerHTML = "Ready";
          element( "player_vol" ).innerHTML = popcorn.volume();

          // Single play/pause button

          addEventListenerHelper( element( "btn-play-pause" ), "click", function() {

            if ( paused ) {
              popcorn.play();
            } else {
              popcorn.pause();
            }
          }, false);

          // Seek
          addEventListenerHelper( element( "btn-seek" ), "click", function() {

            popcorn.currentTime( 30 );
          }, false);

          // Volume
          addEventListenerHelper( element( "btn-volume" ), "click", function() {
            var volume = ( popcorn.volume() === 1 ) ? 0.5 : 1;
            popcorn.volume( volume );
          }, false);

          addEventListenerHelper( element( "btn-mute" ), "click", function() {
            popcorn.mute( !popcorn.media.muted );
          }, false );
        }, false );
    </script>
  </head>
  <body>
    <div>
      <div>
        <!-- Base containing element needs some dimensions and somewhere down the line a parent element
             is relatively positioned -->
        <div id="video-container" style="width: 360px; height: 300px; position: relative;">
          <!-- z-index of video target has to be lower than what's provided for plugins (1000)-->
          <div id="video" style="width: 360px; height: 300px; z-index: 5;" ></div>
        </div>
        <button class="simple" id="btn-play-pause">Play</button>
        <button class="seek" id="btn-seek">Seek to 30</button>
        <button class="volume" id="btn-volume">Toggle Volume</button>
        <button class="mute" id="btn-mute">Toggle Mute</button>
        <div>
          <ul>
            <li>Status: <span id="player-status">Not Ready</span></li>
            <li>Current Time (s): <span id="player-time"></span></li>
            <li>Volume (0-1): <span id="player_vol"></span></li>
            <li>Video Duration (s): <span id="player-duration"></span></li>
          </ul>
        </div>
      </div>
      <div>
        <h3>Description</h3>
        <p>
          This demo will showcase how an HTML5 video can be integrated into Popcorn using our JWPlayer Wrapper. This is done by wrapping the HTML5 video in a flash object and making the flash object masquerade as HTML 5 video.<br />
          Due to the Flash security model, this demo must be run from a web server<br />
          From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.
        </p>
        <h4>Expected Events</h4>
        <ul>
          <li>From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.</li>
          <li>From 20 to 40 seconds, the a flickr stream of 8 images  tagged 'georgia' will appear below 'Flickr Area'.</li>
          <li>From 5 to 15 seconds, the Mozilla Drumbeat logo will appear below 'Image Area'.</li>
          <li>From 5 to 15 seconds, the subtitle 'This is overlaid on top of the video. You can hightlight it!' will appear in front of the video.</li>
          <li>From 0 to 20 seconds, blogs from 'http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml' will appear below 'Google Feed Area'.</li>
          <li>From 0 to 15 seconds, the site 'http://webmademovies.org/' will appear below 'Web Page Area'.</li>
        </ul>
      </div>
      <div id="footnotediv" width="50%" height="50%">
        <strong>Footnote Area</strong><br />
      </div>
      <div id="flickrdiv" width="50%" height="50%">
        <strong>Flickr Area</strong><br />
      </div>
      <div id="imagediv" width="50%" height="50%">
        <strong>Image Area</strong><br />
      </div>
      <div id="feeddiv" width="50%" height="50%">
        <strong>Google Feed Area</strong><br />
      </div>
      <div id="webpagediv" width="100px" height="50px">
        <strong>Web Page Area</strong><br />
      </div>
    </div>
  </body>
</html>
